<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <%@ include file="/pages/common/header.jsp" %>
    <script type="text/javascript">
        $(function () {
            $("input[name=username]").change(function () {
                $("span.errorMsg").text("");
                let username = $(this).val();
                $.getJSON(
                    "UserServlet",
                    "action=exitsAjaxUsername&username=" + username,
                    function (data) {
                        console.log(data);
                        if (username !== "" && data.exitsAjaxUsername === true) {
                            $("span.errorMsg").text("用户名已存在！");
                            $("span.errorMsg").removeClass("green");
                        } else {
                            $("span.errorMsg").text("用户名可用！");
                            $("span.errorMsg").addClass("green");
                        }
                    }
                )
                return false;
            });
        });
    </script>
    <style>
        .green {
            color: green !important;
        }

        span.errorMsg {
            color: red;
        }
    </style>
</head>
<body>
<div class="info">
    <span class="displayedUsername">${sessionScope.user.username}</span>
    <a href="UserServlet?action=logout" class="exit">退出登录</a>
</div>
<h1>用户管理</h1>
<form style="margin-top: 20px" action="ManagerUserServlet" method="post">
    <input type="hidden" name="action" value="${requestScope.action}">
    <table id="content" style="width: 400px;">
        <tr>
            <th>编号</th>
            <th>用户名称</th>
            <th>用户密码</th>
            <th>用户类型</th>
            <th>操作</th>
        </tr>
        <tr>
            <td class="id"><input type="text" name="id" readonly="readonly" value="${empty requestScope.user ? "NA": requestScope.user.id}" style="width: 40px;text-align: center"></td>
            <td class="username"><input type="text" name="username" style="width: 300px" value="${empty requestScope.user ? "" : requestScope.user.username}"></td>
            <td class="password"><input type="text" name="password" style="width: 300px" value="${empty requestScope.user ? "" : requestScope.user.password}"></td>
            <td class="type">
                <select name="type" id="status">
                    <c:choose>
                        <c:when test="${requestScope.user.type != 1}">
                            <option value="普通用户" selected="selected">普通用户</option>
                            <option value="管理员">管理员</option>
                        </c:when>
                        <c:otherwise>
                            <option value="普通用户">普通用户</option>
                            <option value="管理员" selected="selected">管理员</option>
                        </c:otherwise>
                    </c:choose>
                </select>
            </td>
            <td class="action">
                <input type="submit" class="edit" value="提交">
            </td>
        </tr>
    </table>
    <center>
        <div><span class="errorMsg"></span></div>
    </center>
</form>
</body>
</html>